<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格组件</title>
</head>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<body>
<div class="container">
    <table class="table table-bordered">
        {#    表格头部居中#}
        <thead class="thead-dark" style="text-align: center;">
        {#    表格标题#}
        <tr>
            {% for column in columns %}

                <th>{{ column }}</th>
            {% endfor %}
        </tr>
        </thead>

        {#表格内容#}
        <tbody class="table-striped">
        {% for data in datas %}
            <tr>
                <td>{{ data.0 }}</td>
                <td>{{ data.1 }}</td>
                <td>{{ data.2 }}</td>
                {#                编辑和删除按钮#}
                <td>
                    {#点击编辑按钮时，弹出模态框，并传入当前行的user_id#}
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modifyModal"
                            onclick="open_modify_modal(this, {{ data.2 }})">
                        编辑
                    </button>
                    {#                点击删除按钮时，发送ajax请求#}
                    <button type="button" class="btn btn-danger" onclick="delete_data(this)">删除</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{#bootstrap3.4.1的模态框#}
<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="modifyModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modifyModalLabel">修改数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="modifyForm form-control">
                    <div class="form-group">
                        <label for="username">姓名</label>
                        <input type="text" class="form-control" id="username" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="text" class="form-control" id="password" placeholder="请输入密码">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="modifyBtn">保存修改</button>
            </div>
        </div>
    </div>

</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    {#    打开模态框#}

    function open_modify_modal(button, user_id) {
        {#将当前行的username和password填充到模态框的表单中#}
        const username = button.closest('tr').cells[0].innerText;
        const password = button.closest('tr').cells[1].innerText;
        $("#username").val(username);
        $("#password").val(password);
        {#    监听模态框的保存修改按钮，点击的时候触发修改数据函数#}
        $("#modifyModal").on("click", "#modifyBtn", function () {
            const username = $("#username").val();
            const password = $("#password").val();
            modify_data(user_id, username, password);
        });


        {#    保存修改按钮触发的事件#}

        function modify_data(user_id, username, password) {
            console.log(user_id, username, password);
            const form_data = new FormData();
            {#    添加user_id到表单数据#}
            form_data.append("user_id", user_id);
            form_data.append("username", username);
            form_data.append("password", password);
            axios.post("{% url 'update_user_info_api' %}", form_data)
                .then(function (response) {
                    if (response.status === 200) {
                        alert("修改成功！");
                        {#刷新页面#}
                        location.reload();
                    } else {
                        alert("修改失败！");
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }

        function delete_data(button) {
            //TODO: 删除数据
        }
    }

    function delete_data(button) {
        const user_id = button.closest('tr').cells[0].innerText;
        axios.post("{% url 'delete_user_api' %}", {user_id: user_id})
            .then(function (response) {
                if (response.status === 200) {
                    alert("删除成功！");
                    {#刷新页面#}
                    location.reload();
                } else {
                    alert("删除失败！");
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }

</script>
{#引入axios#}
</html>